<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
</head>
<body>
    <h2>京东商城</h2>
<ul>
    
</ul>
<!-- 我们一般会将模板内容创建script标签中
1.必须添加一个类型，原则上可以设置为任意的浏览器不支持的类型
2.行业规范。一般会将类型设置text/template
3.为当前script标签设置唯一id,方便后期的获取 -->
<script type="text/template" id="navTemp">
    <li>
        <a href="#">
            <img src="<%=src%>" alt="">
            <p><%=text%></p>
        </a>
    </li>
</script>

<script>
    // 数据
    var obj = {
        "src":"./images/nav_3.png",
        "text":"京东市场"
    }
   
    var str = document.getElementById("navTemp").innerHTML;
    // console.log(str);
    // <li>
    //     <a href="#">
    //         <img src="<%=src%>" alt="">
    //         <p><%=text%></p>
    //     </a>
    // </li>
   
    var reg = /<%=(\w+)%>/;
    // var match = null
    // ['<%=src%>','src']
    while(match = reg.exec(str)){
        str = str.replace(match[0],obj[match[1]]);
    }

    document.querySelector("ul").innerHTML = str;


</script>
</body>
</html>